<template>
	<view class="login-index">
		<!-- 提示Toast -->
		<u-toast ref="uToast"></u-toast>
		<view class="title">{{ title }}</view>
		<view class="login-content">
			<view class="account">
				<input class="input-style" type="number" placeholder-class="placeholder-style"
					placeholder="手机号" v-model="account" maxlength="11">
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
			<view class="password">
				<input class="input-style-two" type="text" placeholder-class="placeholder-style" placeholder="密码"
					v-model="password" :password="isPassword_one">
				<view class="right">
					<image class="image" :src="img_one" mode="widthFix" @click="changeImg(1)"></image>
					<view class="left-line"></view>
					<view class="find-password" @click="navigateForget">找回密码</view>
				</view>
			</view>
			<u-gap height="1" bgColor="#CDCDCD" marginTop="15"></u-gap>
		</view>
		<view class="remember-password" @click="checked = !checked">
			<view :class="checked? 'checkbox down' : 'checkbox'"></view>
			<text class="text">记住密码</text>
		</view>
		<view class="login-button" @click="confirmlogin">立即登录</view>
		<view class="register">
			<text @click="navigateRegister">新用户注册</text>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		login
	} from '@/common/api.js';
	export default {
		data() {
			return {
				title: '欢迎来到壹值购',
				
				/* 用户登录 */
				account: '', // 登录账号
				password: '', // 登录密码
				checked: false, // 判断是否记住密码
				
				/* 密码点击显示 */
				img_one: '/static/images/login/hide.png', // 密码显示
				img_two: '/static/images/login/hide.png', // 确认密码显示
				isPassword_one: true, // 是否显示密码
				isPassword_two: true, // 是否显示确认密码
			};
		},
		onLoad() {
			this.initUI(); // 获取用户上次登录信息
		},
		onShow() {

		},
		methods: {

			/* 用户登录 */
			confirmlogin() {
				const that = this;
				if (that.account === '') {
					Fn.Toast('手机号不能为空', 3, 1500);
					that.accountFocus = true;
					return;
				};
				if (that.password === '') {
					Fn.Toast('登录密码不能为空', 3, 1500);
					that.passwordFocus = true;
					return;
				};
				let params = {
					userPhone: that.account,
					// userName: that.account,
					password: that.password
				};
				login(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						const user_info = {
							// userName: result.userName,
							userPhone: result.userPhone
						};
						uni.setStorageSync('token', result.token);
						uni.setStorageSync('user_info', JSON.stringify(user_info));
						uni.setStorageSync('remember_password', that.checked);
						if (!that.checked) {
							params.password = '';
						};
						uni.setStorageSync('user_login', JSON.stringify(params));
						// Fn.Toast('登录成功', 3, 1500);
						that.showToast('loading', '登录成功', 1000);
						setTimeout((res) => {
							uni.reLaunch({
								url: '/pages/index/index',
							});
						}, 1000);
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},
			
			/* 判断点击记住密码 */
			initUI() {
				let checked = uni.getStorageSync('remember_password');
				let loginInfo = uni.getStorageSync('user_login');
				if (loginInfo) {
					let info = JSON.parse(loginInfo);
					// this.account = info.userName;
					this.account = info.userPhone;
					this.password = info.password;
				};
				this.checked = checked;
			},

			/* 自定义显示Toast */
			showToast(status, msg, time) {
				const params = {
					type: status,
					message: msg,
					duration: time,
				};
				this.$refs.uToast.show({
					...params,
					complete() {
						// params.url && uni.navigateTo({
						// 	url: params.url
						// });
					},
				});
			},
			
			/* 更改Img样式 */
			changeImg(option) {
				const show = '/static/images/login/show.png';
				const hide = '/static/images/login/hide.png';
				if (option == 1) {
					if (this.img_one == hide) {
						this.img_one = show;
						this.isPassword_one = false;
					} else {
						this.img_one = hide;
						this.isPassword_one = true;
					};
				} else {
					if (this.img_two == hide) {
						this.img_two = show;
						this.isPassword_two = false;
					} else {
						this.img_two = hide;
						this.isPassword_two = true;
					};
				};
			},

			/* 跳转至找回密码页面 */
			navigateForget() {
				uni.navigateTo({
					url: '/pages/login/forget/forget',
				});
			},

			/* 跳转至注册账号页面 */
			navigateRegister() {
				uni.navigateTo({
					url: '/pages/login/register/register',
				});
			}
		}
	}
</script>

<style lang="scss">
	.login-index {
		padding: 0 34px;
		font-family: PingFang_Medium;

		.title {
			padding: 10vh 0;
			font-size: 46rpx;
			font-weight: 600;
		}

		.login-content {

			.input-style {
				width: 50vw;
				font-size: 30rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
				line-height: 60rpx;
			}

			.input-style-two {
				width: 45vw;
				font-size: 30rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
				line-height: 60rpx;
			}

			.placeholder-style {
				color: #CDCDCD;
				// line-height: 60rpx;
			}

			.content-title {
				margin-right: 40rpx;
				color: #000000;
				font-size: 34rpx;
				// font-weight: 600;
				height: 60rpx;
			}

			.account {
				display: flex;
				align-items: center;
			}

			.password {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					
					.image {
						width: 5vw;
						height: 5vw;
						margin-right: 30rpx;
						// cursor: pointer;
					}

					.left-line {
						height: 50rpx;
						border-left: 2px solid #CDCDCD;
					}

					.find-password {
						margin-left: 50rpx;
						font-size: 26rpx;
						// font-weight: 600;
						// cursor: pointer;
					}
				}
			}
		}
		
		.remember-password {
			width: 30vw;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 5vh auto 0 auto;
			// cursor: pointer;
		
			.checkbox {
				width: 35rpx;
				height: 35rpx;
				background: url(~@/static/images/login/checkbox.png) no-repeat;
				background-size: 100% 100%;
				margin-right: 20rpx;
		
				&.down {
					background: url(~@/static/images/login/checkbox-down.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		
			.text {
				font-size: 34rpx;
				// font-weight: 800;
				color: #000000;
				font-family: PingFang_Bold;
			}
		}

		.login-button {
			background-color: #000000;
			margin: 5vh 0;
			text-align: center;
			color: #FFFFFF;
			font-size: 34rpx;
			// font-weight: 600;
			font-family: PingFang_Bold;
			border-radius: 5px;
			line-height: 80rpx;
			box-shadow: 0px 2px 20px #dedede;
			// cursor: pointer;
		}

		.register {
			color: #C0AA94;
			font-size: 28rpx;
			text-align: center;
			// cursor: pointer;
		}
	}
</style>
